<template>
	<view class="logindiv">

		<view class="topimg">
			<h1><img src="http://img-test.gz-yami.com/mini/logo.jpg" alt="" class='loginimg'></h1>
			<p>mall4j</p>
		</view>
		<view class="user">
			<text class="username">用户名</text>
			<input type="text" @change="username" placeholder="请输入用户名">
		</view>
		<view class="user">
			<text>密码</text>
			<input type="text" @change="password" placeholder="请输入密码">
		</view>
		<view class="btnclass">
			<button class="login" @click="login">登录</button>
			<button class="back" @click="backhome">回到首页</button>
		</view>
		<view class="reg">
			<p @click='goreg'>没有账号？去注册&gt;</p>
		</view>
		<img src="http://img-test.gz-yami.com/mini/logo.jpg" alt="" class='loginimg'>
	</view>
</template>

<script>
	var crypto = require("../../utils/crypto.js");
	export default {
		data() {
			return {
				userName: "",
				passWord: ""
			}
		},
		methods: {

			backhome() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			goreg() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			},
			username(e) {
				console.log(e.target.value, '+++++++++++++++');
				this.userName = e.target.value
			},
			password(e) {
				this.passWord = e.target.value
			},
			login() {
				console.log(this.userName, this.passWord);
				uni.request({
					url: 'http://111.67.198.176:8112/login',
					method: 'POST',
					data: {
						userName: this.userName,
						passWord:crypto.encrypt(this.passWord) 
					},
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						if (res.statusCode == 400) {
							uni.showToast({
								icon: 'none',
								title: '密码或用户名错误',
							});
							return;
						}else if(res.statusCode===200){
						uni.setStorageSync('token', res.data.accessToken)
							uni.showToast({
								icon: 'none',
								title: '登录成功',
							});
							uni.switchTab({
								url:'/pages/home/home'
							})
						}

						

					}
				});


			}
		}
	}
</script>

<style scoped>
	.logindiv {
		width: 100%;
		height: 100%;
	}

	.loginimg {
		width: 64px;
		height: 64px;

	}

	.topimg {
		text-align: center;
		margin-top: 50px;
		font-size: 12px;
	}

	.user {
		display: flex;
		width: 90%;
		background-color: #f8f8f8;
		margin-left: 5%;
		height: 30px;
		margin-top: 10px;
		line-height: 30px;
		font-size: 12px;
	}

	.user input {
		margin-top: 5px;
		margin-left: 10px;
	}

	.btnclass {
		margin-top: 30px;
	}

	.login {
		width: 288px;
		height: 29px;
		background-color: #0AB903;
		margin-bottom: 10px;
		font-size: 12px;
		color: #fff;
	}

	.back {
		width: 288px;
		height: 29px;
		background-color: #EEEEEE;
		font-size: 12px;
	}

	.reg p {
		font-size: 12px;
		color: #00AAFF;
		margin-left: 5%;
		margin-top: 10px;
	}
</style>